<template>
  <div>

     
	  <myheader></myheader>
		
		<div id="carousel" class="carousel slide" data-ride="carousel">
		

	
		</div>

    

		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品列表</h3>
				<div class="row">
					<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img class="rounded-corners img-fluid" :src="'http://127.0.0.1:8000/static/upload/'+item.img" width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item?id='+item.id">
						<div v-html="item.name"></div>
						</a></h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
					</div>
				
				</div>

			

			<!--heyui分页逻辑-->
          <br>
          <div>

            <!-- <Pagination v-model="pagination" @change="change"  layout="pager,jumper" small></Pagination> -->

			<Pagination v-model="pagination" layout="pager,jumper" @change="get_goodslist" small></Pagination>


			</div>
			</div>

		</section>

		
	
		

		
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
//导入组件
import myheader from './myheader'
import myfooter from './myfooter'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //检索关键字
	  text:'',

	  //商品列表
	  goodslist:[],

	//分页器变量
      pagination:{
        page:1,
        size:3,
        total:2
	  },
	  
    }
  },
    //注册组件标签
  components:{
	  'myheader':myheader,
	  'myfooter':myfooter,
  },
  mounted:function(){

	  	  //接收检索参数
	  var text = this.$route.query.text;


	  

	  //判断
	  if(text.indexOf(' ')){
			  
		text = text.split(" ");

		//格式转换
		text = JSON.stringify(text);

	  }

	  this.text = text;

	//   console.log(text.split(" "));

	  this.get_goodslist();

},
  methods:{





	//获取商品
     get_goodslist:function(){

                     //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/search/',{params:{page:this.pagination.page,size:this.pagination.size,text:this.text}}).then((result)=>{

				console.log(this.text);



			// for(let i=0;i<result.data.data.length;i++){
			// 	result.data.data[i]['name'] = result.data.data[i]['name'].replace(new RegExp(this.text,'g'),'<span class="highlight">'+this.text+'</span>');
			// 	}
				
				this.goodslist = result.data.data;
				this.pagination.total = result.data.total;

            
			});

	 },

     
  }
}


</script>
 
<style>
.highlight{
  color:yellow;
}



</style>